<script setup lang="ts">
import {ref, computed, onMounted} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {ElButton} from 'element-plus'
import {fetchSearch} from "../request/req.ts";
import {BACKEND_URL} from "../request/Api.ts";

const route = useRoute()
const router = useRouter()

// 订单信息
const orderInfo = ref({
  OrdersNumber: '',
  address: {
    region: ['', '', ''],
    address: '',
    recipient: '',
    phone: ''
  },
  ListCart: [] as Array<{
    Id: number
    GoodsName: string
    image: string
    price: number
    qty: number
  }>,
  total: 0,
  submitTime: ''
})

// 地区名称映射
const regionNames: Record<string, string> = {
  '110000': '北京市',
  '120000': '天津市',
  '130000': '河北省',
  '440000': '广东省',
  '710000': '台湾省',
  '110100': '北京市',
  '120100': '天津市',
  '130100': '石家庄市',
  '130200': '唐山市',
  '440100': '广州市',
  '440300': '深圳市',
  '710100': '台北市',
  '710200': '新北市',
  '110101': '东城区',
  '110102': '西城区',
  '120101': '和平区',
  '120102': '河东区',
  '130102': '长安区',
  '130104': '桥西区',
  '440103': '荔湾区',
  '440104': '越秀区',
  '710101': '中正区',
  '710102': '大同区'
}

// 获取地区显示名称
const getRegionName = (code: string) => {
  return regionNames[code] || code
}

// 格式化地址显示
const formatAddress = computed(() => {
  const region = orderInfo.value.address.region
  const province = getRegionName(region[0])
  const city = getRegionName(region[1])
  const district = getRegionName(region[2])

  return `${province} ${city} ${district} ${orderInfo.value.address.address}`
})

const getOrderData = async () => {
  const res = await fetchSearch({t: 'DD', k: route.query.id})
  orderInfo.value = {
    OrdersNumber: res.OrdersNumber || '',
    address: {
      region: ['', '', ''],
      address: res.Address,
      recipient: res.BuyerName,
      phone: res.BuyerPhone
    },
    ListCart: (res.ListCart || []).map((item: any) => ({
      Id: item.Id,
      GoodsName: item.GoodsName,
      image: BACKEND_URL + item.PicUrls,
      price: item.Pirce,
      qty: item.BuyQty
    })),
    total: res.CartTotal,
    submitTime: res.OrdersTime
  }
}
// 返回首页
const goHome = () => {
  router.push('/')
}


// 继续购物
const continueShopping = () => {
  router.push('/')
}

onMounted(() => {
  getOrderData()
})
</script>

<template>
  <div class="order-success-page">
    <div class="success-container">
      <!-- 成功提示 -->
      <div class="success-header">
        <div class="success-icon">
          <i class="el-icon-success"></i>
        </div>
        <h1>訂單提交成功！</h1>
        <p class="order-number">訂單號：{{ orderInfo.OrdersNumber }}</p>
        <p class="submit-time">提交時間：{{ orderInfo.submitTime }}</p>
      </div>

      <!-- 收货地址信息 -->
      <div class="section address-section">
        <h2>收貨地址</h2>
        <div class="address-info">
          <div class="info-item">
            <span class="label">收貨人：</span>
            <span class="value">{{ orderInfo.address.recipient }}</span>
          </div>
          <div class="info-item">
            <span class="label">手機號碼：</span>
            <span class="value">{{ orderInfo.address.phone }}</span>
          </div>
          <div class="info-item">
            <span class="label">收貨地址：</span>
            <span class="value">{{ formatAddress }}</span>
          </div>
          <div class="info-item">
            <span class="label">訂單狀態：</span>
            <span class="value">未發貨</span>
          </div>
        </div>
      </div>

      <!-- 订单商品信息 -->
      <div class="section order-section">
        <h2>訂單商品</h2>
        <div class="order-items">
          <div
              v-for="item in orderInfo.ListCart"
              :key="item.Id"
              class="order-item"
          >
            <div class="item-info">
              <img :src="item.image" :alt="item.GoodsName" class="item-image"/>
              <div class="item-details">
                <h3 class="item-title">{{ item.GoodsName }}</h3>
                <p class="item-desc">好喝到不行</p>
              </div>
            </div>
            <div class="item-price">HK${{ item.price.toFixed(2) }}</div>
            <div class="item-qty">{{ item.qty }}</div>
            <div class="item-subtotal">HK${{ (item.price * item.qty).toFixed(2) }}</div>
          </div>
        </div>

        <!-- 订单总额 -->
        <div class="order-total">
          <span class="total-label">訂單總額：</span>
          <span class="total-amount">HK${{ orderInfo.total.toFixed(2) }}</span>
        </div>
      </div>

      <div class="action-section">
        <el-button @click="continueShopping">繼續購物</el-button>
        <el-button @click="goHome">返回首頁</el-button>
      </div>

      <div class="tips-section">
        <h3>溫馨提示</h3>
        <ul class="tips-list">
          <li>您的訂單已成功提交，我們會盡快為您處理</li>
          <li>訂單狀態變更會通過短信或郵件通知您</li>
          <li>如有疑問，請聯繫客服：400-123-4567</li>
          <li>感謝您的購買，祝您購物愉快！</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.order-success-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.success-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.success-header {
  padding: 40px 20px;
  text-align: center;
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  color: white;
}

.success-icon {
  font-size: 80px;
  margin-bottom: 20px;
}

.success-header h1 {
  margin: 0 0 16px 0;
  font-size: 28px;
  font-weight: 600;
}

.order-number {
  margin: 8px 0;
  font-size: 16px;
  opacity: 0.9;
}

.submit-time {
  margin: 8px 0;
  font-size: 14px;
  opacity: 0.8;
}

.section {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.section h2 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.address-info {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 6px;
}

.info-item {
  display: flex;
  margin-bottom: 12px;
  font-size: 14px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item .label {
  color: #666;
  min-width: 80px;
  font-weight: 500;
}

.info-item .value {
  color: #333;
  font-weight: 600;
}

.order-items {
  border: 1px solid #eee;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px;
}

.order-item {
  display: grid;
  grid-template-columns: 1fr 120px 100px 120px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.order-item:last-child {
  border-bottom: none;
}

.order-item:first-child {
  background: #fafafa;
  font-weight: 600;
  color: #666;
}

.item-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.item-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
}

.item-title {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(224, 224, 224, 0.84);
}

.item-desc {
  margin: 0;
  font-size: 12px;
  color: #888;
}

.item-price,
.item-qty,
.item-subtotal {
  text-align: center;
  font-weight: 600;
}

.item-price,
.item-subtotal {
  color: #e53935;
}

.order-total {
  text-align: right;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 6px;
}

.total-label {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.total-amount {
  font-size: 24px;
  font-weight: 800;
  color: #e53935;
  margin-left: 12px;
}

.action-section {
  padding: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.tips-section {
  padding: 20px;
  background: #f8f9fa;
}

.tips-section h3 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.tips-list {
  margin: 0;
  padding-left: 20px;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

.tips-list li {
  margin-bottom: 8px;
}

.tips-list li:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .order-success-page {
    padding: 10px;
  }

  .section {
    padding: 15px;
  }

  .success-header {
    padding: 30px 15px;
  }

  .success-header h1 {
    font-size: 24px;
  }

  .order-item {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
  }

  .item-info {
    justify-content: center;
  }

  .action-section {
    flex-direction: column;
    align-items: center;
  }

}
</style>
